<template>
  <div
    class="swiper-container"
    :style="{ '--width': width, '--time': time / 1000 + 's' }"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
        <img :src="item.url" :title="item.title" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
</template>

<script>
import { imgUrl } from "@/api";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

let vm = null;
document.addEventListener("visibilitychange", () => {
  // 回到当前tab标签
  if (document.visibilityState !== "hidden") {
    vm.onChangeWidth();
  }
});

export default {
  data() {
    return {
      // 内置进度条长度，根据时间变化，不可修改，需要修改在css：.swiper-pagination-bullet-active类修改固定长度即可
      width: "0",
      time: 3000, // 时间
      bannerList: [],
    };
  },
  created() {
    vm = this;
  },
  mounted() {
    this.getImgUrl();
  },
  methods: {
    onChangeWidth() {
      this.time = 0;
      this.width = "0";
      setTimeout(() => {
        this.width = "100%";
        this.time = this.$options.data().time;
      }, 100);
    },
    onChangeSwiper() {
      const that = this;
      new Swiper(".swiper-container", {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        observer: true, //开启动态检查器，监测swiper和slide
        // allowTouchMove: false, //设置是否允许触摸滑动
        autoplay: {
          delay: that.time,
          stopOnLastSlide: false,
          // disableOnInteraction: true, // 触摸停止自动切换
          disableOnInteraction: false,
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        on: {
          // 如果进度条未加载，在init 调用 that.onChangeWidth()
          init: () => {},
          // 过渡开始时触发。可选Swiper实例作为参数，会首次加载一次
          transitionStart: () => that.onChangeWidth(),
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    },
    async getImgUrl() {
      const res = await imgUrl();
      if (res.code == 200) {
        this.bannerList = res.data;
        this.$nextTick(() => {
          this.onChangeSwiper();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 850px;
}
.swiper-slide {
  background-color: blue;
  color: #fff;
  font-size: 50px;
  > img {
    width: 100%;
    height: 100%;
  }
}

::v-deep .swiper-pagination {
  .swiper-pagination-bullet {
    overflow: hidden;
    border-radius: 20px !important;
    background-color: #fff;
    box-shadow: #000 0 0 2px 2px;
    opacity: 0.3;
  }

  .swiper-pagination-bullet-active {
    width: 100px !important;
    opacity: 0.8;
    box-shadow: none;

    // 进度条
    &::before {
      content: "";
      display: block;
      width: var(--width);
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      transition: width var(--time) ease;
    }
  }
}
</style>
